<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ueditor图片对话框</title>
    <script type="text/javascript" src="../internal.js"></script>

    <!-- jquery -->
    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>

    <!-- webuploader -->
    <script src="../../third-party/webuploader/webuploader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">

    <!-- image dialog -->
    <link rel="stylesheet" href="image.css" type="text/css" />

    <!--浏览器小图标-->
    <link rel="icon" href="//cdn.mingsoft.net/global/images/ms.ico" type="x-icon">
    <script type="text/javascript" src="../../../../vue/2.6.9/vue.min.js"></script>
    <script src="../../../../vue-i18n/8.18.2/vue-i18n.js"></script>
    <!-- 图标 -->
    <link rel="stylesheet" type="text/css" href="../../../../iconfont/1.0.0/iconfont.css" />
    <script src="../../../../iconfont/1.0.0/iconfont.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../element-ui/2.15.7/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="../../../../element-ui/2.15.7/index.min.js"></script>
    <script src="../../../../element-ui/2.15.7/local/en.min.js"></script>
    <script src="../../../../element-ui/2.15.7/local/zh-CN.min.js"></script>
    <!--图片懒加载-->
    <script src="../../../../vue.lazyload/1.2.6/vue-lazyload.js"></script>
    <!--网络请求框架-->
    <script src="../../../../axios/0.18.0/axios.min.js"></script>
    <script src="../../../../qs/6.6.0/qs.min.js"></script>
    <!--金额转换-->
    <script src="../../../../accounting/0.4.1/accounting.js"></script>
    <!--时间转换-->
    <script src="../../../../moment/2.24.0/moment.min.js"></script>
    <!--铭飞-->
    <script src="../../../../ms/2.0/ms.umd.js"></script>
    <script src="../../../../ms/2.0/ms-el-form.umd.js"></script>

    <!--通用样式-->
    <link rel="stylesheet" href="../../../../../css/app.css"/>
    <link rel="stylesheet" href="../../../../../css/theme.css">
    <![if IE]>
    <script src="../../../../babel-polyfill/7.8.3/polyfill.min.js"></script>
    <![endif]>

    <script src="../../../../../locale/lang/base/zh_CN.js"></script>
    <script src="../../../../../locale/lang/base/en_US.js"></script>


    <script src="../../../../vue-treeselect/0.4.0/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="../../../../vue-treeselect/0.4.0/vue-treeselect.min.css">

    <script>
    ms.base = "http://localhost:8080";
    ms.manager = "http://localhost:8080/ms";
    ms.web = ms.base;
    //图片懒加载
    Vue.use(VueLazyload, {
        error: ms.base + '/static/images/error.png',
        loading: ms.base + '/static/images/loading.png',
    })

    </script>
    <style>
        .ms-admin-menu .is-active {
            border: 0px !important;
        }
        .vue-treeselect__placeholder,.vue-treeselect__single-value {
            font-size: 12px;
            padding-top: -8px;
        }
        .vue-treeselect__control {
            height: 28px;
        }
        .vue-treeselect__label {
            font-size: 12px;
        }

        .vue-treeselect__menu-container {
            z-index: 9999!important;
        }
        #index .ms-container {
            height: calc(100vh - 141px);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="tabhead" class="tabhead">
            <span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>
            <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
            <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
            <span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>
            <span class="tab" data-content-id="zyk"><var id="lang_tab_tp_zyk"></var></span>
        </div>
        <div class="alignBar">
            <label class="algnLabel"><var id="lang_input_align"></var></label>
                    <span id="alignIcon">
                        <span id="noneAlign" class="none-align focus" data-align="none"></span>
                        <span id="leftAlign" class="left-align" data-align="left"></span>
                        <span id="rightAlign" class="right-align" data-align="right"></span>
                        <span id="centerAlign" class="center-align" data-align="center"></span>
                    </span>
            <input id="align" name="align" type="hidden" value="none"/>
        </div>
        <div id="tabbody" class="tabbody">

            <!-- 远程图片 -->
            <div id="remote" class="panel">
                <div class="top">
                    <div class="row">
                        <label for="url"><var id="lang_input_url"></var></label>
                        <span><input class="text" id="url" type="text"/></span>
                    </div>
                </div>
                <div class="left">
                    <div class="row">
                        <label><var id="lang_input_size"></var></label>
                        <span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width"/>px </span>
                        <span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="height"/>px </span>
                        <span><input id="lock" type="checkbox" disabled="disabled"><span id="lockicon"></span></span>
                    </div>
                    <div class="row">
                        <label><var id="lang_input_border"></var></label>
                        <span><input class="text" type="text" id="border"/>px </span>
                    </div>
                    <div class="row">
                        <label><var id="lang_input_vhspace"></var></label>
                        <span><input class="text" type="text" id="vhSpace"/>px </span>
                    </div>
                    <div class="row">
                        <label><var id="lang_input_title"></var></label>
                        <span><input class="text" type="text" id="title"/></span>
                    </div>
                </div>
                <div class="right"><div id="preview"></div></div>
            </div>

            <!-- 上传图片 -->
            <div id="upload" class="panel focus">
                <div id="queueList" class="queueList">
                    <div class="statusBar element-invisible">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div><div class="info"></div>
                        <div class="btns">
                            <div id="filePickerBtn"></div>
                            <div class="uploadBtn"><var id="lang_start_upload"></var></div>
                        </div>
                    </div>
                    <div id="dndArea" class="placeholder" style="height:100% !important">
                        <div class="filePickerContainer">
                            <div id="filePickerReady"></div>
                        </div>
                    </div>
                    <ul class="filelist element-invisible">
                        <li id="filePickerBlock" class="filePickerBlock"></li>
                    </ul>
                </div>
            </div>

            <!-- 在线图片 -->
            <div id="online" class="panel">
                <div id="imageList"><var id="lang_imgLoading"></var></div>
            </div>

            <!-- 搜索图片 -->
            <div id="search" class="panel">
                <div class="searchBar">
                    <input id="searchTxt" class="searchTxt text" type="text" />
                    <select id="searchType" class="searchType">
                        <option value="&s=4&z=0"></option>
                        <option value="&s=1&z=19"></option>
                        <option value="&s=2&z=0"></option>
                        <option value="&s=3&z=0"></option>
                    </select>
                    <input id="searchReset" type="button"  />
                    <input id="searchBtn" type="button"  />
                </div>
                <div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
            </div>
            <!-- 资源库 -->
            <div id="zyk" class="panel">
                <div id="zyk_tp_list" class="searchList" style="height: 350px !important;">
                    <div id="index" class="ms-index" style="height:100%" v-cloak>
                        <ms-search ref="search" @search="search" :condition-data="conditionList" :conditions="conditions"></ms-search>
                        <div class="ms-search">
                            <el-row>
                                <el-form :model="form"  ref="searchForm"  label-width="120px" size="mini">
                                    <el-row>
                                        <el-col :span="8" style="width:45% !important">
                                            <!--名称-->
                                            <el-form-item  label="图片名称" prop="fileName">
                                                <el-input
                                                        v-model="form.fileName"
                                                        :disabled="false"
                                                        :readonly="false"
                                                        :style="{width:  '100%'}"
                                                        :clearable="true"
                                                        placeholder="请输入名称">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="16" style="text-align: right;width:45% !important">
                                            <el-button type="primary" icon="el-icon-search" size="mini" @click="currentPage=1;list(true)">搜索</el-button>
                                            <el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-row>
                        </div>
                        <el-main class="ms-container">
                            <el-table height="calc(100vh - 68px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark">
                                <el-table-column type="index" label="序号" width="60" :index="indexMethod" align="center"></el-table-column>
                                <el-table-column min-width="50" label="图片"  align="left">
                                    <template slot-scope="scope" v-if="scope.row.fileUrls !=''&&JSON.parse(scope.row.fileUrls).length">
                                        <el-popover placement="right" title="" trigger="hover">
                                            <img :src="ms.base+JSON.parse(scope.row.fileUrls)[0].path" style="height: 300px;width: 400px">
                                            <img slot="reference" :src="ms.base+JSON.parse(scope.row.fileUrls)[0].path" :alt="ms.base+JSON.parse(scope.row.fileUrls)[0].path" style="height: 50px;width: 50px">
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column label="名称" align="left" prop="fileName"></el-table-column>
                                <el-table-column label="选择" width="180" align="center">
                                    <template slot-scope="scope">
                                        <el-radio :label="scope.$index" v-model="radio" @change.native="handleSelectionChange(scope.row)">&nbsp;</el-radio>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    background
                                    :page-sizes="[10,20,30,40,50,100]"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    :total="total"
                                    class="ms-pagination"
                                    @current-change='currentChange'
                                    @size-change="sizeChange">
                            </el-pagination>
                        </el-main>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="image.js"></script>
    <script>
        var indexVue = new Vue({
            el: '#index',
            data:{
                conditionList:[
                //名称
                {'action':'and', 'field': 'FILE_NAME', 'el': 'like', 'model': 'fileName', 'name': '名称', 'type': 'input'},
                ],
                conditions:[],
                dataList: [], //资源库列表
                selectionList:[],//资源库列表选中
                total: 0, //总记录数量
                pageSize: 10, //页面数量
                currentPage:1, //初始页
                manager: ms.manager,
                loading: true,//加载状态
                emptyText:'',//提示文字
                radio:'',
                //搜索表单
                form:{
                    sqlWhere:null,
                            // 名称
                            fileName:'',
                            // 图片文件
                            fileUrls: [],
                            fileType:'01',
                },
            },
            watch:{

            },
            methods:{
                isChecked: function(row) {
                    if(row.del == 3) {
                        return false;
                    }
                    return true;
                },
                //查询列表
                list: function(isSearch) {
                    var that = this;
                    var data = {}; //搜索参数
                    that.loading = true;
                    var page={
                        pageNo: that.currentPage,
                        pageSize : that.pageSize
                    }
                    var form = JSON.parse(JSON.stringify(that.form))


                    if(isSearch) {
                        //删除空字符串
                        for (key in form){
                            if(form[key] === undefined || form[key] === null){
                                delete  form[key]
                            }
                        }
                        form.sqlWhere ? data = Object.assign({}, {sqlWhere: form.sqlWhere}, page) : data = Object.assign({}, form, page)
                    } else {
                        data = Object.assign({}, form, page);
                    }

                    history.replaceState({form:form,page:page},"");
                    ms.http.post(ms.manager+"/cmsMessage/cmsResourcePool/list.do",data).then(
                            function(res) {
                                if (!res.result||res.data.total <= 0) {
                                    that.emptyText ="暂无数据"
                                    that.dataList = [];
                                    that.total = 0;
                                } else {
                                    that.emptyText = '';
                                    that.total = res.data.total;
                                    that.dataList = res.data.rows;
                                }
                                that.loading = false;
                            }).catch(function(err) {
                                that.loading = false;
                                console.log(err);
                            });

                    },
                //资源库列表选中
                handleSelectionChange:function(val){
                    this.selectionList = val;
                    if (val.length > 1) {
                      this.$refs.multipleTable.clearSelection();
                      this.$refs.multipleTable.toggleRowSelection(val.pop());
                    }

                    console.log(this.selectionList);
                },
                //复制
                copy: function (row) {
                    var that = this;
                    delete row.id
                    ms.http.post(ms.manager + "/cmsMessage/cmsResourcePool/save.do", row).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title:'成功',
                                type: 'success',
                                message: "复制成功"
                            });
                            //复制成功，刷新列表
                            that.list();
                        } else {
                            that.$notify({
                                title: "错误",
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                },
                downloadFile: function(row){
                    if(JSON.parse(row.fileUrls)[0].path !='' && JSON.parse(row.fileUrls)[0].path !=null){
                        this.downloadByBlob(ms.base+JSON.parse(row.fileUrls)[0].path,row.fileName);
                    }
                },
                downloadByBlob : function(url,name) {
                    let that = this;
                    let image = new Image()
                    image.setAttribute('crossOrigin', 'anonymous')
                    image.src = url
                    image.onload = () => {
                      let canvas = document.createElement('canvas')
                      canvas.width = image.width
                      canvas.height = image.height
                      let ctx = canvas.getContext('2d')
                      ctx.drawImage(image, 0, 0, image.width, image.height)
                      canvas.toBlob((blob) => {
                        let url = URL.createObjectURL(blob)
                        that.download(url,name)
                        // 用完释放URL对象
                        URL.revokeObjectURL(url)
                      })
                    }
                  },
                  download :function(href, name) {
                    let eleLink = document.createElement('a')
                    eleLink.download = name
                    eleLink.href = href
                    eleLink.click()
                    eleLink.remove()
                  },
                //删除
                del: function(row){
                    var that = this;
                    that.$confirm("此操作将永久删除所选内容, 是否继续", "提示", {
                                    confirmButtonText: "确认",
                                    cancelButtonText: "取消",
                                    type: 'warning'
                                }).then(function() {
                                    ms.http.post(ms.manager+"/cmsMessage/cmsResourcePool/delete.do", row.length?row:[row],{
                                        headers: {
                                            'Content-Type': 'application/json'
                                        }
                                    }).then(
                                        function(res){
                                            if (res.result) {
                                                that.$notify({
                                                    type: 'success',
                                                    message:"删除成功"
                                                });
                                                //删除成功，刷新列表
                                                that.list();
                                            }else {
                                                that.$notify({
                                                    title: "错误",
                                                    message: res.msg,
                                                    type: 'warning'
                                                });
                                            }
                                    });
                                }).catch(function(err) {
                                    //删除如果用户取消会抛出异常，所以需要catch一下
                                });
                        },
                //新增
                save:function(id){
                    form.open(id);
                },

                //pageSize改变时会触发
                sizeChange:function(pagesize) {
                    this.loading = true;
                    this.pageSize = pagesize;
                    this.list(true);
                },
                //currentPage改变时会触发
                currentChange:function(currentPage) {
                    this.loading = true;
                    this.currentPage = currentPage;
                    this.list(true);
                },
                search:function(data){
                    this.form.sqlWhere = JSON.stringify(data);
                    this.list(true);
                },
                //重置表单
                rest:function(){
                    this.currentPage = 1;
                    this.form.sqlWhere = null;
                    this.$refs.searchForm.resetFields();
                    this.list();
                },
                indexMethod(index){
                    index = (index + 1) + (this.currentPage - 1) * this.pageSize
                    return index
                }

            },
        created:function(){

                if(history.state){
                    this.form = history.state.form;
                    this.currentPage = history.state.page.pageNo;
                    this.pageSize = history.state.page.pageSize;
                }

                this.list();
            },
        })
</script>
</body>
</html>